<template>
	<div>
		<div class="crumbs">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-menu"></i>{{systemName}}</el-breadcrumb-item>
                <el-breadcrumb-item>流程报表</el-breadcrumb-item>
                <el-breadcrumb-item>报表预览</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
		
		<!-- 查询表单 -->
		<el-form :inline="true" :model="search" ref="searchForm" label-width="90px">
			<el-form-item label="报表名称" :rules="{required: true, type: 'number',  message: '请选报表名称'}" prop="reportId">
				<el-select v-model="search.reportId" placeholder="报表名称">
					<el-option v-for="item in workflowData" :key="item.id" :label="item.reportName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="success" plain @click="makeTable('searchForm')">生成预览</el-button>
			</el-form-item>

			<!-- 菜单同步 -->
			<el-form-item label="所属菜单" :rules="{required: true, type:'array', message: '请选择菜单'}" prop="menuId">
				<el-cascader change-on-select filterable placeholder="搜索菜单" :props="menuProps" :options="options" v-model="search.menuId" @change="handleChange"></el-cascader>
			</el-form-item>
			
			<el-form-item label="映射路径" :rules="{type: 'string', message: '请选择菜单'}" prop="linkAddress">
				<el-input size="small" v-model="search.linkAddress" disabled :placeholder="路径"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="danger" plain @click="mapToMenu('searchForm')" :loading="mapLoading">同步报表至菜单</el-button>
			</el-form-item>

			<el-form-item>
				<el-button type="info" icon="el-icon-delete" plain @click="resetForm('searchForm')"></el-button>
			</el-form-item>
			<!-- 菜单同步End -->
		</el-form>
		<!-- 查询表单 End-->	

		<!-- 报表模板渲染 -->
	  	<transition name="move" mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	import reportModel from '../../components/reportModel.vue'

	export default {
		name: 'reportPreview',
		data (){
			return {
				// 菜单配置项
				menuProps: {
					value: 'id',
					label: 'customName',
					children: 'childrenList'
				},

				// 处理状态
				mapLoading: false,

				// 映射路径
				linkAddress: '',

				// 系统名称
				systemName: '',
				// 菜单Id
				menuId: [],

				// 菜单选项
				options: [],

				workflowData: [],
				search: {
					reportId: '',
					menuId: [],
					linkAddress: ''
				},
			}
		},
		mounted: function(){
			// 查询已配置报表
			this.$http.post('/api/report/query').then(response => {
				this.workflowData = response.data.rows;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
			// 获得当前系统状态
			this.$http.post('/api/db/status').then(response => {
                var status = response.data.status;
                this.systemName = status === 'oadbMain' ? '正式系统' : '测试系统'; 
            }, response => {
                console.log('Ajax can not get the data from the server!!!');
            });
            // 获得菜单数据
            this.$http.post('/api/tree/menu').then(response => {
            	this.options = response.data;
            }, response => {
                console.log('Ajax can not get the data from the server!!!');
            });
		},
		methods: {
			// 生成报表预览
			makeTable: function(formName){
				this.$refs[formName].validateField('reportId', (error) => {
					if (!error){
						this.$router.push({path: `/flowReportPreview/${this.search.reportId}`});
					}
				});
			},
			// 映射至菜单链接
			mapToMenu: function(formName){
				this.$refs[formName].validate((valid) => {
					if (valid){
						this.mapLoading = true;	
						// 映射路径
						var linkAddress = '/onet/report/#/' + this.search.reportId;
						this.$http.post('/api/menu/mapToMenu', {linkAddress: linkAddress, menuId: this.search.menuId[this.search.menuId.length-1]}, {emulateJSON: true}).then(response => {
							if (response.data.message == 1){
								this.$notify({
									title: '成功',
									message: '菜单路径同步至最新报表！',
									type: 'success'
								});
								this.search.linkAddress = linkAddress;
							} else {
								this.$notify({
									title: '错误',
									message: '菜单同步失败！！',
									type: 'error'
								});
							}
							
							this.mapLoading = false;
						}, response => {
							this.$notify({
								title: '错误',
								message: '菜单同步失败！！',
								type: 'error'
							});
							console.log('Ajax can not get the data from the server!!!');
							this.mapLoading = false;
						});
					}
				});
				
			},

			// 重置表单
			resetForm: function(formName){
				this.$refs[formName].resetFields();
			},

			// 菜单的变化
			handleChange: function(value){
				this.search.linkAddress = "";
				for (let i = 0, len = this.options.length; i <= len - 1; i++){
					this.getMenuLinkAddress(this.options[i], value[value.length - 1]);
				}
			},

			// 获得菜单信息
			getMenuLinkAddress: function(menu, value){
				let menuItem = menu.childrenList;
				let len = menuItem ? menuItem.length : 0;
				let i = 0;
				while (i < len){
					if (menuItem[i].childrenList){
						this.getMenuLinkAddress(menuItem[i], value);
					}
					if (value === menuItem[i].id){
						this.search.linkAddress = menuItem[i].linkAddress;
						break;
					}
					i++;
				}
			},

			// 获得子组件的表单控件输入值
			getSearchValue: function(prop, value){
				this.search[prop] = value;
				console.log(this.search, prop, value);
			},
		},
		components: {
			'report-model': reportModel
		}
	}
</script>